<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="../application/vue.js"></script>
    <style>
        body{
            margin-bottom:400px;
        }
    </style>
</head>
<body>
    <div class="app">
        <textarea name="" id="" cols="30" rows="10">{{msg}}</textarea>
        <textarea name="" id="" cols="30" rows="10" :value="msg"></textarea>
        <hr>    
        <form action="#" target="_blank">
            <input type="radio" name="sex" id="" value="male">男
            <input type="radio" name="sex" id="" value="female">女
            <input type="radio" name="sex" id="" value="yao">人妖
            <input type="submit" value="提交">
        </form>
        <hr>
        <h1>单行文本框</h1>
        <p>{{msg}}</p>
        <input type="text" v-model="msg">
        <input type="text" :value="msg" @input="msg=$event.target.value">
        <hr>
        <p>{{color}}</p>
        <input type="color" v-model="color">
        <input type="color" name="" id="" :value="color" @input="color=$event.target.value">
        <input type="color" name="" id="" :value="color" @change="color=$event.target.value">
        <hr>
        <p>{{date}}</p>
        <input type="date" name="" id="" v-model="date">
        <input type="date" :value="date" @input="date=$event.target.value" name="" id="">
        <input type="date" :value="date" @change="date=$event.target.value" name="" id="">
        <hr>
        <p>{{num}}</p>
        <input type="range" max=100 min=0 step=5 v-model="num" name="" id="">
        <input type="range" max=100 min=0 step=5 value="num" @input="num=$event.target.value" name="" id="">
        <input type="range" max=100 min=0 step=5 value="num" @change="num=$event.target.value" name="" id="">
        <hr>
        <h1>多行文本域</h1>
        <p>info:{{info}}</p>
        <textarea @input="info=$event.target.value" cols="20" rows="10">{{info}}</textarea>
        <textarea @input="info=$event.target.value" :value="info" cols="20" rows="10"></textarea>
        <textarea v-model="info" cols="20" rows="10"></textarea>
        <h1>单选按钮</h1>
        <p>radioFlag:{{radioFlag}}</p>
        <input type="radio" value="M" :checked="radioFlag" @change="radioFlag=true">
        <input type="radio" value="F" :checked="radioFlag" @change="radioFlag=true">
        <input type="radio" value="X" :checked="radioFlag" @change="radioFlag=true">
        <p>radioData:{{radioData}}</p>
        <input type="radio" value="M" :checked="radioData=='M'" @change="radioData=$event.target.value">
        <input type="radio" value="F" :checked="radioData=='F'" @change="radioData=$event.target.value">
        <input type="radio" value="X" :checked="radioData=='X'" @change="radioData=$event.target.value">
        <br>
        <input type="radio" value="M" v-model="radioData">
        <input type="radio" value="F" v-model="radioData">
        <input type="radio" value="X" v-model="radioData">
        <h1>多选按钮----复选框</h1>
        <p>checkData1:{{checkData1}}</p>
        <p>当取值为非数组时：</p>
        <input type="checkbox" value="A" v-model="checkData1">
        <input type="checkbox" value="B" v-model="checkData1">
        <input type="checkbox" value="C" v-model="checkData1">
        <p>当取值为数组时，但未绑定value属性:</p>
        <input type="checkbox" v-model="checkData2">
        <input type="checkbox" v-model="checkData2">
        <input type="checkbox" v-model="checkData2">
        <p>当取值为数组时并且为其绑定value属性:</p>
        <input type="checkbox" value="A" v-model="checkData2">
        <input type="checkbox" value="B" v-model="checkData2">
        <input type="checkbox" value="C" v-model="checkData2">
        <p>拆分双向绑定:</p>
        <input type="checkbox" :checked="checkFlag" @change="checkFlag=!checkFlag">
        <input type="checkbox" :checked="checkFlag" @change="checkFlag=!checkFlag">
        <input type="checkbox" :checked="checkFlag" @change="checkFlag=!checkFlag">
        <p>双向绑定:</p>
        <input type="checkbox"  v-model="checkFlag">
        <input type="checkbox"  v-model="checkFlag">
        <input type="checkbox"  v-model="checkFlag">
        <p>拆分双向绑定及原理剖析：</p>
        <input type="checkbox" value="A" :checked="checkData2.indexOf('A')!=-1" @change="checkArr($event.target.value)">
        <input type="checkbox" value="B" :checked="checkData2.indexOf('B')!=-1" @change="checkArr($event.target.value)">
        <input type="checkbox" value="C" :checked="checkData2.indexOf('C')!=-1" @change="checkArr($event.target.value)">
        <p>关于true-value和false-value</p>
        <input type="checkbox" true-value="同意" false-value="不同意" v-model="checkData1">
        <h1>下拉列表</h1>
        <p>selectData:{{selectData}}</p>
        <select @change="selectData=$event.target.value">
            <option >请选择</option>
            <option >杨超越</option>
            <option value="yi">鞠婧祎</option>
            <option value="yun">王梦云</option>
        </select>
        <select :value="selectData" @change="selectData=$event.target.value">
            <option >请选择</option>
            <option >杨超越</option>
            <option value="yi">鞠婧祎</option>
            <option value="yun">王梦云</option>
        </select>
        <select v-model="selectData">
            <option >请选择</option>
            <option >杨超越</option>
            <option value="yi">鞠婧祎</option>
            <option value="yun">王梦云</option>
        </select>
    </div>
</body>
<script>
    new Vue({
        el:".app",
        data:{
            msg:"梦云妹妹",
            color:"",
            date:"",
            num:0,
            info:"不良帅袁天罡",
            radioFlag:false,
            radioData:"",
            checkData1:"",
            checkData2:[],
            checkFlag:false,
            selectData:"yi",
        },
        methods:{
            checkArr(e){
                let i=this.checkData2.indexOf(e);
                if(i==-1){
                    this.checkData2.push(e);
                    // console.log(i);
                }else{
                    // console.log(i);
                    this.checkData2.splice(i,1);
                }
            }
        }
    })
</script>
</html>